<template>
	<uni-collapse-item title="证据要点" thumb="https://riddle.miyucaicai.cn/evidence.png"
		:open="true">
		<view class="evidence-list">
			<view class="evidence-item" v-for="(item,index) in evidence" :key="index">
				<view class="index">{{index+1}}</view>
				<view class="evidence-info">
					<text class="evidence-title">{{item.title}}</text>
				</view>
			</view>
		</view>
	</uni-collapse-item>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const props = defineProps({
		evidence: {
			type: Array,
			required: true,
		}
	})
</script>

<style lang="scss" scoped>
	.evidence-list {
		display: flex; // 如果需要列表项水平排列，可以取消此注释  
		flex-direction: column; // 如果需要列表项垂直排列，则保持此设置  
		padding: 0 10rpx; // 可选，增加一些内边距  

		.evidence-item {
			display: flex;
			align-items: center; // 使子元素垂直居中  
			padding: 5rpx; // 可选，增加一些内边距  
			width: 100%; // 占据父容器的全部宽度  
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); // 黑色，20%不透明度

			.index {
				margin-right: 10rpx; // 索引和证据信息之间的间隔  
				width: 10%; // 索引的固定宽度，可以根据需要调整  
				text-align: center; // 使索引数字居中  
				font-size: 28rpx;
				margin-right: 10rpx;
			}

			.evidence-info {
				flex: 1; // 占据剩余的空间  

				.evidence-title {
					font-size: 27rpx;
					font-family: 'Arial', sans-serif; // 设置字体家族  
				}
			}
		}
	}
</style>